<template>
  <!-- 线路列表 -->
  <div class="poyline">
    <div class="poyline-header">
      <el-card class="poyline-condition">
        <el-form ref="formRef" :inline="true" :model="formColunm">
          <el-form-item label="活动" prop="activityValue">
            <el-select v-model="formColunm.activityValue" placeholder="请选择活动">
              <el-option v-for="item in formColunm.activityOptions" :key="item.Code" :label="item.Name"
                :value="item.Code" />
            </el-select>
          </el-form-item>
          <el-form-item label="城市" prop="cityValue">
            <el-select v-model="formColunm.cityValue" placeholder="请选择城市">
              <el-option v-for="item in formColunm.cityOptions" :key="item.Code" :label="item.Name" :value="item.Code" />
            </el-select>
          </el-form-item>
          <el-form-item label="场馆" prop="venueValue">
            <el-select v-model="formColunm.venueValue" placeholder="请选择场馆" @visible-change="handleVisibleChange">
              <el-option v-for="item in formColunm.venueOptions" :key="item.Code" :label="item.Name" :value="item.Code" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="onReset(formRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="poyline-list">
      <el-row>
        <el-col>
          <!-- 线路列表 -->
          <el-table :data="compState.tableDate" border stripe>
            <el-table-column prop="markLine.ID" label="ID"></el-table-column>
            <!-- <el-table-column prop="ActivityCode" label="活动"></el-table-column>
            <el-table-column prop="CityCode" label="城市"></el-table-column>
            <el-table-column prop="VenueCode" label="场馆"></el-table-column> -->
            <el-table-column prop="activity.Name" label="活动" show-overflow-tooltip></el-table-column>
            <el-table-column prop="city.Name" label="城市"></el-table-column>
            <el-table-column prop="activityVenues.CHIDescription" label="场馆" show-overflow-tooltip></el-table-column>
            <el-table-column prop="markLine.PathName" label="线路名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="markLine.Pellucidity" label="透明度"></el-table-column>
            <el-table-column prop="markLine.Pattern" label="样式"></el-table-column>
            <el-table-column prop="markLine.Colour" label="颜色"></el-table-column>
            <el-table-column prop="markLine.IsValid" label="是否有效">
              <template #default="scope">
                {{ scope.row.markLine.IsValid == 1 ? '有效' : '无效' }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="primary" :icon="Edit"
                  @click="showPoylineOnmap(scope.row.markLine)">查看</el-button>
                <el-button size="small" type="danger" @click="deletePoyline(scope.row.markLine.ID)"
                  :icon="Delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="9">
          <el-pagination background layout="prev, pager, next" v-model:total="compState.total"
            v-model:page-size="compState.pageSize" v-model:current-page="compState.page"
            @current-change="handleCurrentChange" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
  
<script setup>
import { ref, reactive, onMounted } from "vue";
// import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit } from '@element-plus/icons-vue';
import { QueryActivity, QueryCity, QueryVenue } from '../../network/childCity'
import { QueryMarkLine, DeleteMarkLine } from '../../network/poyline'
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
const formRef = ref()
const router = useRouter()
const store = useStore()
const formColunm = reactive({
  activityValue: "-1",
  activityOptions: [{
    Code: "-1",
    Name: "全部"
  }],
  cityValue: "-1",
  cityOptions: [{
    Code: "-1",
    Name: "全部"
  }],
  venueValue: "-1",
  venueOptions: [{
    Code: "-1",
    Name: "全部"
  }]
})
const compState = reactive({
  tableDate: [],
  total: 0,
  pageSize: 10,
  page: 1
})

const onReset = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
const onSubmit = () => {
  let paramObj = {
    ActivityCode: formColunm.activityValue,
    CityCode: formColunm.cityValue,
    VenueCode: formColunm.venueValue,
    PageIndex: compState.page,
    PageSize: compState.pageSize
  }
  // console.log(paramObj)
  QueryMarkLine(paramObj).then(res => {
    // console.log(res)
    compState.tableDate = res?.List
    compState.total = res?.Total
  }).catch(err => {
    console.log(err)
  })
}
// 下拉显示触发
const handleVisibleChange = () => {
  // 场馆下拉
  QueryVenue({ ActivityCode: formColunm.activityValue, CityCode: formColunm.cityValue }).then(res => {
    // console.log(res)
    if (res?.length > 0) {
      formColunm.venueOptions = [{
        Code: "-1",
        Name: "全部"
      }]
      res.forEach(item => {
        formColunm.venueOptions.push(item)
      })
    }
  }).catch(err => {
    console.log(err)
  })
}
const handleCurrentChange = (val) => {
  compState.page = val
  onSubmit()
}
const showPoylineOnmap = (markLine) => {
  // console.log(markLine.ID)
  sessionStorage.setItem("poylineId", markLine.ID)
  router.push('/mapManage')
  store.commit('app/setPath', `/mapManage`);
}
const deletePoyline = (id) => {
  // console.log(id)
  ElMessageBox.confirm(
    '确认删除?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      DeleteMarkLine({
        ID: id
      }).then(res => {
        // console.log(res)
        if (res == true) {
          ElMessage({ type: 'success', message: '删除成功', })
          onSubmit()
        }
      }).catch(err => {
        console.log(err)
        ElMessage({ type: 'danger', message: err, })
      })
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '失败取消了', })
    })
}
onMounted(async () => {
  // 活动下拉
  await QueryActivity().then(res => {
    // console.log(res)
    if (res?.length > 0) {
      formColunm.activityOptions = [{
        Code: "-1",
        Name: "全部"
      }]
      res.forEach(item => {
        formColunm.activityOptions.push(item)
      })
    }
  }).catch(err => {
    console.log(err)
  })
  // 城市下拉
  await QueryCity().then(res => {
    // console.log(res)
    if (res?.length > 0) {
      formColunm.cityOptions = [{
        Code: "-1",
        Name: "全部"
      }]
      res.forEach(item => {
        formColunm.cityOptions.push(item)
      })
    }
  }).catch(err => {
    console.log(err)
  })
  // 请求表格数据
  onSubmit()
})
</script>
<style lang="scss" scoped>
.poyline {
  margin: 14px 15px 14px;

  .poyline-header {
    .poyline-condition {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-top: 14px;
    }
  }

  .poyline-list {
    margin-top: 14px;
  }
}
</style>
  